<template>
  <div class="detailReport">
    <el-card class="box-card">
      <el-form>
        <el-form-item>
          <el-input
            placeholder="员工姓名"
            v-model="queryData.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="业务线名称"
            v-model="queryData.businessName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="项目名称"
            v-model="queryData.projectName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-time-picker
            v-model="queryData.startPrintingDate"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            placeholder="打卡日期开始时间"
          >
          </el-time-picker>
          <el-time-picker
            v-model="queryData.closePrintingDate"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            placeholder="打卡日期结束时间"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-select v-model="queryData.job" placeholder="在职状态" clearable>
            <el-option label="在职" value="0"></el-option>
            <el-option label="离职" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.providerName"
            placeholder="所属供应商"
            clearable
          >
            <el-option
              label="嘻嘻嘻开发公司"
              value="嘻嘻嘻开发公司"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handlerSearch">查询</el-button>
          <el-button type="warning" @click="exportTable">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table
        v-loading="loading"
        id="table-list"
        :data="formList"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="员工姓名" fixed="" align="center">
        </el-table-column>
        <el-table-column
          prop="providerName"
          label="所属供应商"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="job" align="center" label="在职状态">
          <template slot-scope="scope">
            <div>{{ scope.row.job == 0 ? "在职" : "离职" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="businessName"
          align="center"
          width="150px"
          label="所属业务线"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          align="center"
          width="150px"
          label="所属项目"
        >
        </el-table-column>
        <el-table-column prop="leader" align="center" label="项目负责人">
        </el-table-column>
        <el-table-column
          prop="printingDate"
          width="100px"
          align="center"
          label="打卡日期"
        >
        </el-table-column>
        <el-table-column prop="clockTimeIn" align="center" label="上班打卡时间">
        </el-table-column>
        <el-table-column
          prop="locationPunchIn"
          align="center"
          width="200px"
          label="上班打卡地点"
        >
        </el-table-column>
        <el-table-column
          prop="timePunchOut"
          align="center"
          label="下班打卡时间"
        >
        </el-table-column>
        <el-table-column
          prop="placePunchAfter"
          align="center"
          width="200px"
          label="下班打卡地点"
        >
        </el-table-column>
        <el-table-column
          prop="actualHour"
          align="center"
          label="实际上班工时/h"
        >
        </el-table-column>
        <el-table-column prop="addedHours" align="center" label="加班工时/h">
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        @pagination="getStatementList"
      />
    </el-card>
  </div>
</template>
<script>
// 导入接口文件
import { selectDetailReport } from "../../../api/statement";

import axios from "axios";
import Pagination from "../../../components/Pagination/index.vue";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      loading: true,
      region: "",
      region1: "",
      formList: [],
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        businessName: "", //业务线名称
        closePrintingDate: "", //打卡日期结束时间
        job: "", //在职状态
        name: "", //员工名称
        projectName: "", //项目名称
        providerName: "", //所属供应商
        startPrintingDate: "", //打卡日期开始时间
      },
    };
  },
  created() {
    this.getStatementList();
  },
  methods: {
    // 获取数据
    getStatementList() {
      selectDetailReport(this.queryData).then((res) => {
        this.loading = false;
        this.total = res.data.total; //总条数
        this.queryData.pageNum = res.data.current; //当前页
        this.queryData.pageSize = res.data.size; //每页显示条数
        this.formList = res.data.records;
      });
    },
    // 查询按钮
    handlerSearch() {
      this.getStatementList();
    },
    // 导出按钮
    exportTable() {
      axios({
          url:'http://ebzefy.natappfree.cc/spring/excel/detailReportExport',
          method:'get',
          responseType: 'blob'
        })
        .then((response) => {
          console.log(response);
          if (!response || !response.data) {
            return;
          }
          let blob = new Blob([response.data]); //response.data为后端传的流文件
          let downloadFilename = "明细报表.xlsx"; //设置导出的文件名
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            //兼容ie浏览器
            window.navigator.msSaveOrOpenBlob(blob, downloadFilename);
          } else {
            //谷歌,火狐等浏览器
            let url = window.URL.createObjectURL(blob);
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = downloadFilename;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(url);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card {
  margin: 20px;
}
.el-form {
  display: flex;
  justify-content: space-evenly;
}
</style>
